<template>
	<view
		:class="['ff-form-popup',show?'ff-form-popup-open':'ff-form-popup-close',confirmUUId?'ff-form-popup-confirm-open':'ff-form-popup-confirm-close']">
		<view class="ff-form-popup-content" 
		@click="open()">
			<slot name="default" :data="data"></slot>
		</view>
		<view class="ff-form-popup-mask"
			:style="{'background-color': maskColor, 'opacity': confirmUUId?'1':show?'0.8':'0', 'z-index': zIndex}"
			@click="close()"></view>
		<view class="ff-form-popup-box" 
			:style="{'z-index': zIndex}">
			<view class="ff-form-popup-tips-header" v-if="showTips">
				<slot name="tips-header" :data="data"></slot>
			</view>
			<view class="ff-form-popup-tips" :style="{'border-radius': popupRadius}" v-if="showTips">
				<slot name="tips" :data="data">
					<view class="ff-form-popup-tips-content">
						<view class="ff-form-popup-tips-title">
							<slot name="tips-title" :data="data">
								{{tipsTitle}}
							</slot>
						</view>
						<view class="ff-form-popup-tips-description">
							<slot name="tips-description" :data="data">
								{{tipsDescription}}
							</slot>
						</view>
					</view>
					<view class="ff-form-popup-operate">
						<slot name="tips-operate" :data="data"></slot>
					</view>
				</slot>
			</view>
			<view class="ff-form-popup-box-content"
				:style="{'background-color': popupColor, 'border-radius': popupRadius}">
				<view class="ff-form-popup-navigation">
					<slot name="navigation" :data="data">
						<view></view>
						<view class="ff-form-popup-title">
							<slot name="popup-title">{{title}}</slot>
						</view>
						<view class="ff-form-popup-close-box" @click="close()">
							<ff-icon class="ff-form-popup-close-icon" name="guanbi3" size="15"
								:color="confirmUUId?'rgb(199 199 199 / 90%)':'var(--UI-FG-0)'" />
						</view>
					</slot>
				</view>
				<ff-loading ref="loading">
					<view class="ff-form-popup-content"
						:style="{'min-height': minHeight, 'max-height': maxHeight, 'height': height, 'background-color': contentColor, 'border-radius': contentRadius, 'padding': contentPadding}">
						<slot name="content" :data="data"></slot>
					</view>
					<view class="ff-form-popup-operate">
						<slot name="operate" :data="data">
							<view style="padding: 10px;">
								<ff-button @click="confirm()">{{confirmTitle}}</ff-button>
							</view>
						</slot>
					</view>
				</ff-loading>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ff-form-popup",
		components: {},
		props: {
			title: {
				type: String,
				default: '标题',
			},
			confirmTitle: {
				type: String,
				default: '提交',
			},
			tipsTitle: {
				type: String,
				default: '提醒',
			},
			tipsDescription: {
				type: String,
				default: '提醒内容',
			},
			minHeight: {
				type: String,
				default: 'unset',
			},
			maxHeight: {
				type: String,
				default: 'unset',
			},
			height: {
				type: String,
				default: 'unset',
			},
			maskColor: {
				type: String,
				default: 'rgb(0 0 0 / 75%)',
			},
			popupColor: {
				type: String,
				default: 'aliceblue',
			},
			popupRadius: {
				type: String,
				default: '20px 20px 0px 0px',
			},
			contentRadius: {
				type: String,
				default: 'unset',
			},
			contentPadding: {
				type: String,
				default: '0px 10px',
			},
			showTips: {
				type: Boolean,
				default: false,
			},
			showLoading: {
				type: Boolean,
				default: true,
			},
			contentColor: {
				type: String,
				default: 'unset',
			},
			zIndex: {
				type: Number,
				default: 1000,
			},
		},
		data() {
			return {
				show: false,
				data: {},
				originalData: {},
				loadDataUUId: null,
				confirmUUId: null,
				originalOverflow: undefined,
			};
		},
		mounted() {

		},
		computed: {
			loading() {
				if (this.showLoading) {
					return this.$refs['loading']
				} else {
					return {
						open(msg = null) {},
						close() {},
						success(msg = null, code = 200, outTime = null) {},
						error(msg = "请求失败", code = 500, outTime = null) {},
					}
				}
			},
		},
		methods: {
			close() {
				if (this.confirmUUId != null) {
					console.log("confirm 重复请求已经被丢弃");
					return;
				}
				this.show = false
				this.data = {}
				this.originalData = {}
				this.loadDataUUId = null;
				this.confirmUUId = null;
				// #ifdef H5
				document.getElementsByTagName('body')[0].style.overflow =  this.originalOverflow;
				// #endif
			},
			open() {
				this.show = true
				if (this.$listeners.loadData) {
					this.loadData();
				}
				// #ifdef H5
				this.originalOverflow = document.getElementsByTagName('body')[0].style.overflow;
				document.getElementsByTagName('body')[0].style.overflow =  "hidden";
				// #endif
			},
			cancel() {
				if (this.loadDataUUId != null) {
					console.log("reset 重置失败数据正在被重新加载");
					return;
				}
				if (this.submitUUId != null) {
					console.log("reset 重置失败数据正在被提交");
					return;
				}
				this.data = JSON.parse(JSON.stringify(this.originalData));
			},
			confirm() {
				if (this.$listeners.confirm == undefined) {
					this.loading.success();
					this.close();
					return;
				}
				if (this.loadDataUUId != null) {
					console.log("confirm 保存失败数据正在被重新加载");
					return;
				}
				if (this.confirmUUId != null) {
					console.log("confirm 重复请求已经被丢弃");
					return;
				}
				let uuid = this.$ff.util.guid();
				this.confirmUUId = uuid;
				this.loading.open();
				this.$emit('confirm', this.data, {
					complete: (data = undefined) => {
						if (this.confirmUUId != uuid) {
							console.log("confirm 当前请求已经被丢弃");
							return;
						}
						this.confirmUUId = null;
						if (data != undefined) {
							this.data = JSON.parse(JSON.stringify(data));
							this.originalData = JSON.parse(JSON.stringify(data));
						}
						this.loading.success();
						this.close();
					},
					error: (msg = "获取数据失败, 请重新请求", code = 500) => {
						if (this.confirmUUId != uuid) {
							console.log("confirm 当前请求已经被丢弃");
							return;
						}
						this.confirmUUId = null;
						this.loading.error(msg, code, 1000);
					}
				});
			},
			loadData() {
				if (this.confirmUUId != null) {
					console.log("loadData 数据保存中不能重新加载");
					return;
				}
				let uuid = this.$ff.util.guid();
				this.loadDataUUId = uuid;
				this.loading.open();
				this.$emit('loadData', {
					complete: (data = {}) => {
						if (this.loadDataUUId != uuid) {
							console.log("loadData 当前请求已经被丢弃");
							return;
						}
						this.loadDataUUId = null;
						this.data = JSON.parse(JSON.stringify(data));
						this.originalData = JSON.parse(JSON.stringify(data));
						this.loading.close();
					},
					error: (msg = "获取数据失败, 请重新请求", code = 500) => {
						if (this.loadDataUUId != uuid) {
							console.log("loadData 当前请求已经被丢弃");
							return;
						}
						this.loadDataUUId = null;
						this.loading.error(msg, code);
					}
				});
			}
		}
	}
</script>

<style scoped>
	ff-form-popup {}

	.ff-form-popup {
		width: 100%;
		overflow: 'hidden';
	}

	.ff-form-popup-box {
		position: fixed;
		width: 100vw;
		bottom: 0px;
		left: 0px;
		transition-duration: 0.5s;
	}

	.ff-form-popup-box-content {
		border-radius: 20px 20px 0px 0px;
		position: relative;
	}

	.ff-form-popup-mask {
		width: 100vw;
		position: fixed;
		top: 0px;
		left: 0px;
		height: 100vh;
		transition-duration: 0.3s;
	}

	.ff-form-popup-open .ff-form-popup-mask {
		display: block;
		opacity: 1;
	}

	.ff-form-popup-close .ff-form-popup-mask {
		display: none;
		opacity: 0;
		animation: animation-close 0.3s linear infinite;
	}

	.ff-form-popup-content {
		overflow: scroll;
	}

	@keyframes animation-close {
		0% {
			display: block;
		}

		100% {
			display: none;
		}
	}

	.ff-form-popup-open .ff-form-popup-box {
		transform: translate(0px, 0%);
	}

	.ff-form-popup-close .ff-form-popup-box {
		transform: translate(0px, 100%);
	}

	.ff-form-popup-navigation {
		display: flex;
		align-items: center;
		justify-content: space-between;
		align-content: center;
		height: 45px;
	}

	.ff-form-popup-close-box {
		padding: 10px 20px;
	}

	.ff-form-popup-title {
		padding-left: 40px;
		font-weight: bold;
		font-size: 16px;
	}

	.ff-form-popup-tips {
		background-color: black;
		padding: 10px 10px 30px 10px;
		position: relative;
		top: 20px;
		transition-duration: 0.3s;
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		flex-direction: row;
	}

	.ff-form-popup-open .ff-form-popup-tips {
		transform: translate(0px, 0%);
	}

	.ff-form-popup-close .ff-form-popup-tips {
		transform: translate(0px, 100%);
	}

	.ff-form-popup-tips-title {
		color: #ffffff;
		font-size: 14px;
	}

	.ff-form-popup-tips-description {
		color: #ffffff;
		font-size: 12px;
	}

	.ff-form-popup-tips-header {
		position: relative;
		top: 20px;
	}

	.ff-form-popup-confirm-open {}

	.ff-form-popup-confirm-close {}

	.ff-form-popup-close-icon {
		transition-duration: 0.3s;
	}
</style>